<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <!--自动检测屏幕大小-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title></title>
    <link rel="stylesheet" type="text/css" href="js/bootstrap.css" />
    <script src="js/jquery-3.2.0.min.js"></script>
    <script src="js/bootstrap.js"></script>


</head>

<body class="">
	<div class="container">
	    
	    <p>..navbar-header：		主体部分</p>
		<p>..navbar-brand：		左边logo位置</p>
		<p>..navbar-nav：		隐藏部分的 ul</p>
		<p>..navbar-form：		表单</p>
		<p>..navbar-btn：		按钮</p>
		<p>..navbar-text：		文本样式</p>
		<p>..navbar-link：		链接样式</p>
		<hr />
		
		<p>..navbar-left：		靠左排列</p>
		<p>..navbar-right：		靠右排列</p>
		<hr />
		
		<p>..navbar-default：	浅灰色导航条</p>
		<p>..navbar-innverse：	反色导航条</p>
		<hr />
		
		<p>..navbar-static-top：	创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。 使用时标签外面最好不要有 ..container</p>
		<p>..navbar-fixed-top：	固定在顶部</p>
		<p>..navbar-fixed-bottom：固定在底部</p>
	
	
	<!--*****************************************************************************-->
	<!--*****************************************************************************-->
	    <!--头部，包括logo图标和右侧的按钮-->
	    <nav class="navbar navbar-default">
	    	<div class="container-fluid">
	    		<!--固定部分-->
	        	<div class="navbar-header">
	            	<a href="" class="navbar-brand">..navbar-header</a>
	
	            	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar1">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
	        	</div>
	
				<!--隐藏部分-->
	        	<div class="collapse navbar-collapse" id="mynavbar1">
	            	<ul class="nav navbar-nav">
	                	<li class="active"><a href="">官网</a></li>
	                	
	                	<!--下拉菜单*********************************-->
	                	<li class="dropdown">
	                		<a href="" class="dropdown-toggle" data-toggle="dropdown">
	                			<span>下拉菜单<span class="caret"></span></span>
	                		</a>
	                		
	                		<ul class="dropdown-menu">
	                			<li><a href="">00000</a></li>
	                			<li><a href="">00000</a></li>
	                		</ul>
	                	</li>
	                	
	                	<!--按钮*************************************-->
	                	<li>
							<button class="btn navbar-btn">按钮</button>
	                	</li>
	            	</ul>
					
					
					<!--表单******************************************-->
					<form action="" class="navbar-form navbar-left">
						<div class="form-group">
							<input type="text" name="" id="" value="" class="form-control"/>
						</div>
						<div class="form-group">
							<input type="submit" name="" id="" value="搜索" class="btn"/>
							<button class="btn">
								<span class="glyphicon glyphicon-search"></span>
							</button>
						</div>
							
					</form>
					
					
					<!--文本文字**************************************-->
					<p class="navbar-text">文本文字</p>
					
					<!--非导航的链接**************************************-->
					<p class="navbar-text"><a href="" class="navbar-link">非导航的链接</a></p>
					
					
					
					<!--靠右****************************************-->
	            	<ul class="nav navbar-nav navbar-right">
	                	<li class=""><a href="">靠右链接</a></li>
	            	</ul>
	
	        	</div>
	    	</div>
	    </nav>
	
	</div>
	
	<!--****************************************************************-->
	<!--****************************************************************-->
    <nav class="navbar navbar-default navbar-static-top">
    	<p>..navbar-static-top</p>
    	<div class="container">
    		<!--固定部分-->
        	<div class="navbar-header">
            	<a href="" class="navbar-brand">
            		<img src="img/1.jpg" height="100%"/>
            	</a>

            	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar2">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				
				
				
        	</div>

			<!--隐藏部分-->
        	<div class="collapse navbar-collapse" id="mynavbar2">
				
				<!--右侧部分-->
            	<ul class="nav navbar-nav navbar-right">
                	<li class=""><a href="">靠右链接</a></li>
            	</ul>
        	</div>
    	</div>
    </nav>
    
    
	<!--****************************************************************-->
	<!--****************************************************************-->
    
	
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	<hr />
	
	
	
</body>
</html>
